<template>
  <el-avatar :size="props.size"
             :src="getSrc()"
             :alt="props.alt"
             :shape="props.round ? 'circle' : 'square' "
             :class="getTagClass()"
             :style="style"
  >
    <slot />
  </el-avatar>
</template>

<script setup lang="ts">
const props = defineProps({
  src: {
    type: String,
    default: null
  },
  alt: {
    type: String,
    default: null
  },
  size: {
    type: Number,
    default: 20
  },
  round: {
    type: Boolean,
    default: false
  },
  fontSize: {
    type: Number,
    default: null
  }
});
const style = {
  fontSize: props.fontSize + "px"
};
const tagClass = ref<string[]>(["tag-red", "tag-red-2", "tag-yellow", "tag-yellow-2", "tag-blue", "tag-blue-2", "tag-cyan", "tag-green", "tag-green-2", "tag-purple", "tag-purple-2"]);
const getSrc = () => {
  if (props.src != null && props.src?.length != 0) {
    return props.src;
  } else {
    return "";
  }
}
const getTagClass = () => {
  let i = Math.floor(Math.random() * tagClass.value.length);
  return tagClass.value[i];
}
</script>

<style scoped lang="scss">
</style>